import React, { Component } from 'react';
class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0
		}
		this.increment = this.increment.bind(this);
		this.subtract = this.subtract.bind(this);
		this.incrementIfOdd = this.incrementIfOdd.bind(this);
		this.incrementAsync = this.incrementAsync.bind(this);
	}

	increment() {
		let { count } = this.state
		const number = this.select.value * 1
		count += number
		this.setState({
			count
		})
	}

	subtract() {
		let { count } = this.state
		const number = this.select.value * 1
		count -= number
		this.setState({
			count
		})
	}
	incrementIfOdd() {
		let { count } = this.state
		const number = this.select.value * 1
		if (count % 2 === 1) {
			count += number
			this.setState({
				count
			})
		}
	}

	incrementAsync() {
		let { count } = this.state
		const number = this.select.value * 1
		setTimeout(() => {

			count += number
			this.setState({
				count
			})
		}, 1000)
	}


	render() {
		const { count } = this.state
		return (
			<div>
				<p>click {count} times</p>
				<div>
					<select ref={select => this.select = select}>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
					</select>
					<button onClick={this.increment}>+</button>
					<button onClick={this.subtract}>-</button>
					<button onClick={this.incrementIfOdd}>increment if oddd</button>
					<button onClick={this.incrementAsync}>imcrment async</button>
				</div>
			</div>
		);
	}
}

export default App;